<template>
	<view class="content-box" v-if="!loading" :style="{ paddingTop: `${boxHeight}` }">
		<pub-head headerName="gamewt_game_record" :headerConfig="headerConfig"></pub-head>

		<scroll-view scroll-y="true" :style="{ height: `calc(100vh - ${boxHeight})` }">

			<view class="record safe-bottom">
				<view class="cal-item">
					<view class="top-label flex_center">近100期被杀统计</view>
					<view class="list-cal">
						<view class="cal" v-for="(item, index) in record.kill_record" :key="index">
							<!-- <image class="top" :src="`../static/game/brand/room_name_${item.room_id}_${$store.lang}.png`"
								mode="widthFix"></image> -->
							<image v-if="item.room_id == 1" class="top" src="../static/game/brand/room_name_1_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 2" class="top" src="../static/game/brand/room_name_2_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 3" class="top" src="../static/game/brand/room_name_3_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 4" class="top" src="../static/game/brand/room_name_4_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 5" class="top" src="../static/game/brand/room_name_5_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 6" class="top" src="../static/game/brand/room_name_6_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 7" class="top" src="../static/game/brand/room_name_7_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.room_id == 8" class="top" src="../static/game/brand/room_name_8_zh.png"
								mode="widthFix">
							</image>
							<text class="bottom">{{ item.count }}</text>
						</view>
					</view>
				</view>

				<view class="cal-item">
					<view class="top-label flex_center">近10期杀手房间记录</view>
					<view class="list-cal">
						<view class="cal" v-for="(item, index) in record.room_record" :key="index"
							style="width: calc(100% / 5);">
							<!-- <text class="top">{{$game.getRoomName(item.killer_room)}}</text> -->
							<!-- <image class="top"
								:src="`../static/game/brand/room_name_${item.killer_room}_${$store.lang}.png`"
								mode="widthFix"></image> -->

							<image v-if="item.killer_room == 1" class="top" src="../static/game/brand/room_name_1_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 2" class="top" src="../static/game/brand/room_name_2_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 3" class="top" src="../static/game/brand/room_name_3_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 4" class="top" src="../static/game/brand/room_name_4_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 5" class="top" src="../static/game/brand/room_name_5_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 6" class="top" src="../static/game/brand/room_name_6_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 7" class="top" src="../static/game/brand/room_name_7_zh.png"
								mode="widthFix">
							</image>
							<image v-if="item.killer_room == 8" class="top" src="../static/game/brand/room_name_8_zh.png"
								mode="widthFix">
							</image>
							<text class="bottom">NO.{{ item.game_id }}</text>
						</view>
					</view>
				</view>

				<view class="cal-item">
					<view class="top-label flex_center">我的参与记录</view>
					<view class="list-cal2">
						<view class="">共投入 {{ record.join_record.payout }}</view>
						<view class="">共获得 {{ record.join_record.bonus }}</view>
					</view>
				</view>

				<battle-record :lists="record.join_record.last_record"></battle-record>

				<view @click="$comFun.openWin('/pages/gameDts/page/record_more')" class=""
					style="width: 100%;text-align: center;color: #fff;font-weight: bold;font-size: 28rpx;">
					-- 查看更多 --
				</view>
				<br>
			</view>

		</scroll-view>
	</view>
</template>

<script>
import battleRecord from '../components/battle-record/battle-record'
import {
	requestGet,
	requestPost
} from '../common/util.js'
export default {
	components: {
		battleRecord
	},
	data() {
		return {
			headerConfig: {
				title: '记录列表',//标题栏内容
				left_type: 3,
				left_content:'white',
				title_color: '#fff'
			},
			loading: false,
			record: []
		};
	},

	computed: {
		boxHeight: function () {
			return (this.$gameStore.NavHeight + 50 + 5) + 'px';
		},
	},

	onLoad() {
		this.dataList()
	},

	methods: {
		dataList() {
			this.loading = true;
			requestGet(this.$comFun.baseURL + 'project/api/game/record', {}, true, false).then(res => {
				this.loading = false;
				console.log(res)
				if (res.code == 200) {
					this.record = res.result
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content-box {
	position: absolute;
	width: 100vw;
	min-height: 100vh;
	background: url('../static/game/bg_betting_record.png') center no-repeat;
	background-size: 100% 100%;
	// background-attachment: fixed;
}

.record {
	padding: 0 30rpx;
	box-sizing: border-box;
	// height: 100vh;
	// overflow-y: auto;
}

.flex_center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cal-item {
	position: relative;
	width: 100%;
	// height: 300rpx;
	background-color: #0000008c;
	border: 2rpx solid #B55E1A;
	border-radius: 30rpx;
	box-sizing: border-box;
	margin-bottom: 40rpx;

	.top-label {
		margin: auto;
		margin-top: -2rpx;
		width: fit-content;
		height: 50rpx;
		background-color: #dca775;
		font-size: 26rpx;
		font-weight: 500;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 20rpx 20rpx;
	}

	.list-cal2 {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #fff;
		padding: 30rpx 50rpx 60rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.list-cal {
		display: flex;
		flex-wrap: wrap;
		height: calc(100% - 50rpx);
		padding: 30rpx;
		box-sizing: border-box;

		.cal {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% / 4);
			height: 100rpx;
			color: #fff;
			font-size: 24rpx;

			.top {
				width: 80rpx;
				// height: 40rpx;
			}

			.bottom {
				font-size: 22rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}
}</style>